<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//vue项目当前
import axios from 'axios'
//简化写法
// axios.get('http://127.0.0.1:8888/api/users',{params:{page:1,pagesize:10}})
// axios.post('http://127.0.0.1:8888/api/users',{page:1,pagesize:10})
//标准写法
// axios({
//     method: 'get',
//     url: 'http://127.0.0.1:8888/api/users',
//     params: {page:1,pagesize:10}
// })

//baseUrl简化路径(这种方式只能简化一个接口)
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'

// axios.get('users',{params:{page:1,pagesize:10}})
// axios.post('users',{page:1,pagesize:10})

//挂载到Vue的原型链上
Vue.prototype.$http = axios

this.$http.get('users',{params:{page:1,pagesize:10}})
this.$http.post('users',{page:1,pagesize:10})

/*
解决一个问题:后端接口不只一个,多个(在复杂的情况下更具有适应性)
*/

// this.$http.post('http://192.168.10.10:80/api/orders',{page:1,pagesize:10})

const instance1 = axios.create({
    baseURL: 'http://127.0.0.1:8888/api/'
})

const instance2 = axios.create({
    baseURL: 'http://192.168.10.10:80/api/'
})

instance1.get('users',{params:{page:1,pagesize:10}})
instance1({
    method: 'get',
    url: 'users',
    params:{page:1,pagesize:10}
})
instance2.get('orders',{params:{page:1,pagesize:10}})

</script>
</html>